<template>
     <!-- 用户 id-->
    <el-select size="medium" v-loadMore="loadMore" v-if="type === 'id'" v-model="employees_id" multiple :loading="loading" clearable filterable remote :remote-method="remoteMethod" placeholder="请输入人员姓名搜索" @change="onChange" @focus="onfocus">
        <el-option
            v-for="item in employeesList"
            :key="item.employees_id"
            :label="item.employee.name"
            :value="item.employees_id">
        </el-option>
        <el-option class="observer_dom" :label="finish?'没有更多了...':'加载中...'" value="null" disabled  />
    </el-select>

        <!-- 角色 -->
    <el-select size="medium" v-else-if="type === 'role'" v-model="ids" multiple :loading="loading" clearable filterable placeholder="请输入角色搜索" @change="onChange">
        <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>

    <el-select size="medium" :disabled='disabled' @focus='onFocus' v-else-if="type === 'keshi'" v-model="ids" multiple :loading="loading" clearable filterable remote :remote-method="remoteMethod2" placeholder="请输入科室名搜索" @change="onChange">
        <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
</template>

<script>
import {Apiemployees,Apiroles,Apidisciplines} from '@/api'
import {mapState} from 'vuex'
export default {
    name: 'multipleSearch',
    props:{
        type:{
            default: 'id'
        },
        options:{
            default: ()=>({})
        },
        disabled:{
            default: false,
            type:Boolean
        },
        middleList:{
            default:()=>([])
        }, 
        middleInfoList:{
            default:()=>({})
        }
    },
    watch:{
        middleList:{
            handler(value){
                this.flag = true
                this.employees_id = value
                this.employeesList = JSON.parse(JSON.stringify(this.middleInfoList))
            },
            deep: true,
        }
    },
    data(){
        return{
            employeesList: [],
            employees_id: [],
            code: null,
            loading: false,

            list:[],
            ids:[],

            apiOb:{
                keshi:Apidisciplines
            },
            ops:{
                page: 1,
                perPage: 20,
                total: null,
                name:"",
            },

            loadMoreLoading:false,
            finish:true,

            flag: false
        }
    },
    methods:{
        onfocus(){
            if(this.employeesList.length === 0 || this.flag){
                this.flag = false
                this.remoteMethod("")
            }
                
        },
        clear(){
            this.employeesList = []
            this.employees_id = []
            this.list = []
            this.ids = []
        },
        remoteMethod(name){
            this.ops.name = name.trim()
            this.ops.page = 1
            this.loading = true
            this.getList()
        },
        loadMore(){
            this.ops.page ++ 
            this.loadMoreLoading = true
            this.getList()
        },
        getList(){
            let options = {review_status:1,...this.options,...this.ops}
            Apiemployees(options).then(({data,page}) => {
                this.employeesList = this.ops.page === 1 ? data : this.employeesList.concat(data)
                this.finish = this.employeesList.length >= page.total
            }).finally(()=>{
                this.loading = false
                this.loadMoreLoading = false
            })
        },
        onChange(id){
            this.$emit('onChange',id)
        },
        onFocus(){
            if(this.ids.length === 0) this.remoteMethod2(' ')
        },
        remoteMethod2(name){
            name = name.trim()
            // if(!name) {
            //     this.list = []
            //     return
            // }
            this.loading = true
            let options = {name,allPage:2,...this.options}
            this.apiOb[this.type](options).then(({data}) => {
                this.list = data
            }).finally(()=>{
                this.loading = false
            })
        },
        getRoles(){
            if(this.list.length > 0) return
            let options = {allPage:2,...this.options}
            Apiroles(options).then(({data}) => {
                this.list = data
            })
        }
    }
}
</script>